40+ Tooltips Scripts With AJAX, JavaScript & CSS

 

 

  • Nice Titles
    A classic. The script uses a background image. 
    tooltips-scripts-ajax-css-javascript-22

 

 

 

 

  • qTip
    Works for all elements, not only for links in most browsers - IE 5.5+, Firefox, Safari and Opera. 
    tooltips-scripts-ajax-css-javascript-22

 

  • Form field hints with CSS Tooltips
    t’s a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this. 
      tooltips-ask

 

  • JS Tooltip
    Displays customizable tool tip message for each link element on a web page. A tool tip that can be added to the anchor element unobtrusively by adding a class value to it. This was done by having the tool tip message pull from the specific title attribute of the anchor element that the tool tip was added too. 
     tooltips-scripts-ajax-css-javascript-0

 

  • BoxOver
    Flexible DHTML-Tooltipp in numerous formats. Appears (almost) immedately and fades in during loading. 
    boxover
  • SuperNotes
    Converts footnotes to tooltips. Appears immediately and can be assigned with a fixed position in the browser window. 
    supernotes
  • Tipster
    Multifunctional tool tips with JavaScript. 
    tooltips-scripts-ajax-css-javascript-9

 

  • 5 Tooltips by DHTMLGoodies
    First version is suppose to improve the usability of online forms: 
    form
  • The second technique uses AJAX. 
    goodie
  • Walter Zorns JavaScript, DHTML Tooltipps
    These tooltips can be used for different purposes; the code is well-documented and can easily be improved and modified. 

    goodie
  • clueTip
    This is a demo page for the new clueTip — a jQuery-based, AJAX-powered tooltip. The clueTip plug-in was inspired by Cody Lindley’s jTip script. 
    tooltips-scripts-ajax-css-javascript-14

 

 

  • Sweet Titles
    JavaScript Fading Tooltips.
  • Hover Tip
    Tooltip with menu-like capabilities. The tooltip layer will remain visible while the viewer hovers over it. This allows you to place clickable links inside tooltip content. 
    tooltips-scripts-ajax-css-javascript-15

 

 

  • overLIB
    This JavaScript-library can be used in a variety of ways; many positioning and appearance features are available. 
    overlib

 

 

  • Tooltip.js
    Tooltipps with AJAX. The library uses the Prototype JavaScript Framework. The demo doesn’t work any longer. 
    tooltips-scripts-ajax-css-javascript-19

 

CSS-Based Solutions

  • CSS Tooltips
    A simple demonstration of using custom CSS tooltips as a drop-in replacement for the browser-based title attribute. 
    tooltips-scripts-ajax-css-javascript-1

 

  • CSS Technique for Tooltips
    CSS can create “faux tooltips” much the same as the JavaScript ones, but without all the (possibly) undesirable scripting. There are a few in’s and out’s involved, but surprisingly, the methods are rather easy to accomplish.
    Tooltips Scripts - CSS Tooltips - Part One

 

 

  • CSS Menu Descriptions
    This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. And since it doesn’t rely of JavaScript, it should be useful to everyone, even disabled users.
    Tooltips Scripts - CSS: Menu Descriptions | Mike’s Experiments | MikeCherim.com

 

 

 

 

 

 

 

Further Solutions

  • Snap.com
    Snap gives you a visual preview of each result before you click on it. And that improves your odds of picking the right search, without clicking back-and-forth several times.
    Tooltips Scripts - Snap

 

  • DHTML Tooltips
    Popup a help tip or information layer onmouseover using this object-based DHTML tooltip code. The basic version, presented on this page, can contain plain text or rich html, images, or images and text. The tooltip can be displayed over a background image. It can move with mouse movement. And it is easy to customize and modify.
    Tooltips Scripts - DHTML Tooltips: Pop-up Layer Onmouseover
  • Animated Tooltip Javascript

 

 

 

Source : Smashing Magazine

1 Comment

Comments have been disabled for this content.